<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../base.jsp" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!--使用最新的浏览器引擎解析该页面-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--显示页面的数据，根据设备的宽度，比例是1:1-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>同心抗疫</title>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <script src="${ctx}/plugins/echarts/echarts.min.js"></script>
    <script src="${ctx}/plugins/echarts/china.js"></script>

</head>
<body>
<!--head-->
<jsp:include page="../head.jsp"></jsp:include>
<div id="app">
    <ul class="nav nav-tabs nav-justified">
        <li role="presentation" class="active:shows==1" @click="fun1() "><a href="/cdata/map.do">疫情地图</a></li>
        <li role="presentation" class="active:shows==2" @click="fun2()"><a href="/knowledge/list.do">疾病知识</a></li>
        <li role="presentation" class="active:shows==3" @click="fun3()"><a href="/work/list.do">抗疫作品</a></li>
    </ul>
</div>

<!--总数据列表-->
<div class="panel panel-default" id="app1">
    <!-- Default panel contents -->
    <h4 style="color: #0f0f0f;font-weight: bold"><i class="el-icon-star-on"></i>国内疫情数据</h4>
    <%--<div class="panel-heading">国内疫情数据</div>--%>
    <!-- Table -->
    <table class="table">
        <thead>
        <tr v-for="(c,i) in ctotal">
            <th style="text-align: center">
                <li class="list-group-item list-group-item-success"><span style="color: #0f0f0f">现存确诊:</span>{{c.nowconfirm}}
                </li>
            </th>
            <th style="text-align: center">
                <li class="list-group-item list-group-item-info"><span style="color: #0f0f0f">境外输入:</span>{{c.importedcase}}
                </li>
            </th>
            <th style="text-align: center">
                <li class="list-group-item list-group-item-warning"><span style="color: #0f0f0f">无症状感染者:</span>{{c.noinfect}}
                </li>
            </th>
        </tr>
        <tr v-for="(c,i) in ctotal">
            <th style="text-align: center">
                <li class="list-group-item list-group-item-success"><span style="color: #0f0f0f">累计确诊:</span>{{c.confirm}}
                </li>
            </th>
            <th style="text-align: center">
                <li class="list-group-item list-group-item-info"><span style="color: #0f0f0f">累计死亡:</span>{{c.dead}}
                </li>
            </th>
            <th style="text-align: center">
                <li class="list-group-item list-group-item-warning"><span style="color: #0f0f0f">累计治愈:</span>{{c.heal}}
                </li>

            </th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

<!--国内疫情地图-->
<h4 style="color: #0f0f0f;font-weight: bold"><i class="el-icon-star-on"></i>国内疫情地图</h4>
<div class="panel panel-default">
    <div class="panel-heading">现存确诊</div>
    <div class="container" id="map" style="width: 600px; height: 450px; margin: 0 auto">
    </div>
</div>

<p class="bg-warning">.
<p/>
<!--各省数据表格-->
<h4 style="color: #0f0f0f;font-weight: bold"><i class="el-icon-star-on"></i>各省疫情数据</h4>
<div id="app3" style="width: 800px; height: 600px; margin: 0 auto">
    <template>
        <el-table
                :header-cell-style="cellStyle"
                :data="tableData"
                height="550"
                border
                style="width: 100%">
            <el-table-column align="center"
                             prop="name"
                             label="地区"
                             width="180">
            </el-table-column>
            <el-table-column align="center"
                             prop="nowconfirm"
                             label="现有确诊"
                             width="180">
            </el-table-column>
            <el-table-column align="center"
                             prop="confirm"
                             label="累计确诊">
            </el-table-column>
            <el-table-column align="center"
                             prop="dead"
                             label="死亡">
            </el-table-column>
            <el-table-column align="center"
                             prop="heal"
                             label="治愈">
            </el-table-column>
        </el-table>
    </template>
</div>


<jsp:include page="../footer.jsp"></jsp:include>


<!-- vue-->
<script>
    new Vue({
        el: '#app',
        methods: {
            fun1: function () {
                this.shows = 1;
            },
            fun2: function () {
                this.shows = 2;
            },
            fun3: function () {
                this.shows = 3;
            },
        }
    })
    var app1 = new Vue({
        el: "#app1",
        data: {
            ctotal: [] //用于列表迭代
        },
        methods: {
            getList: function () {
                axios.get('/cdata/ctotal.do')
                    .then(res => {
                        console.log(res.data)
                        //赋值
                        this.ctotal.push(res.data)
                    }).catch(err => {
                    console.log("调用异常：" + err)
                })
            }
        },
        created: function () {
            //调用列表方法
            this.getList()
        }
    })
</script>

<!-- 疫情地图-->
<script type="text/javascript">
    $.ajax({
        url: "/cdata/cmap.do",
        dataType: "json",
        success: function (result) {
            initChart(result)
        }
    });

    function initChart(result) {
        var dataList = [];
        for (var i = 0; i < result.length; i++) {
            var d = {name: result[i].name, value: result[i].nowconfirm}
            dataList.push(d);
        }

        var map = echarts.init(document.getElementById('map'));//初始化

        var COLORS = ["#ffffff", "#faebd2", "#e9a188", "#d56355", "#bb3937", "#772526", "#480f10"];//图例里的颜色
        option = {//配置项（名称）

            tooltip: {//提示框组件
                formatter: function (params, ticket, callback) {//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。
                    return params.seriesName + '<br />' + params.name + '：' + params.value
                }//数据格式化
            },
            backgroundColor: '#eeeeee',//背景色
            visualMap: {//visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
                type: 'piecewise',//分段型视觉映射组件
                orient: 'horizontal',//方向

                left: 'left',//位置
                top: 'bottom',//位置

                pieces: [{//自定义『分段式视觉映射组件』的每一段的范围，以及每一段的文字，以及每一段的特别的样式。
                    value: 0, color: COLORS[0]
                }, {
                    min: 1, max: 9, color: COLORS[1]
                }, {
                    min: 10, max: 99, color: COLORS[2]
                }, {
                    min: 100, max: 499, color: COLORS[3]
                }, {
                    min: 500, max: 999, color: COLORS[4]
                }, {
                    min: 1000, max: 10000, color: COLORS[5]
                }, {
                    min: 10000, color: COLORS[6]
                }],
                inRange: {
                    color: COLORS //取值范围的颜色
                },

                show: true//图注
            },
            geo: {//地理坐标系组件用于地图的绘制
                map: 'china',
                roam: false,//不开启缩放和平移
                zoom: 1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis: {
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series: [//系列列表。（图表）
                {
                    name: '现存',
                    type: 'map',//图表类型
                    geoIndex: 0,
                    data: dataList//图表的数据
                }
            ]
        };
        map.setOption(option)  //用配置项配置（动词）echarts
    }
</script>

<!-- 各省数据-->
<script type="text/javascript">
    var Main = {
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            cellStyle({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0 && columnIndex === 0) { //指定坐标
                    return 'background:#D2E9FF;textAlign:center;color:#409EFF;font-weight:500'
                } else if (rowIndex === 0 && columnIndex === 1) {
                    return 'background:#FFF8D7;textAlign:center;color:#E6A23C;font-weight:500'
                } else if (rowIndex === 0 && columnIndex === 2) {
                    return 'background:#EBD6D6;textAlign:center;color:#F56C6C;font-weight:500'
                } else if (rowIndex === 0 && columnIndex === 3) {
                    return 'background:#F0F0F0;textAlign:center;color:#909399;font-weight:500'
                } else if (rowIndex === 0 && columnIndex === 4) {
                    return 'background:#DFFFDF;textAlign:center;color:#67C23A;font-weight:500'
                } else if (rowIndex === 1) {
                    return 'background:#DFFFDF;textAlign:center'
                }
            },
            getChildren: function () {
                axios.get('/cdata/cmap.do')
                    .then(res => {
                        console.log(res.data)
                        //赋值
                        this.tableData = res.data
                    }).catch(err => {
                    console.log("调用异常：" + err)
                })
            }
        },
        created: function () {
            //调用列表方法
            this.getChildren()
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app3')
</script>
</body>
</html>